<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 动态更改html font-size属性 -->
    <script>
        document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px'
        window.onresize = function () {
            document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px'
        }
    </script>
    <!-- swiper.css -->
    <!-- <link rel="stylesheet" href="lib/swiper/swiper.min.css"> -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 七张轮播 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page1">
                <div class="title">
                    <h3>生活中,</h3>
                    <p>经常会有这样的时候,</p>
                    <div class="line"></div>
                </div>
                <!-- 三个轮播区域 -->
                <div class="scroll-page1">
                    <div class="bg"></div>
                    <div class="person">
                        <div class="files">
                            <div class="paper1"></div>
                            <div class="paper2"></div>
                        </div>
                    </div>
                    <div class="info-container">
                        <div class="info"></div>
                    </div>

                </div>
                <div class="scroll-page2">
                    <div class="bg"></div>
                    <div class="person">
                        <div class="leg1"></div>
                        <div class="leg2"></div>
                    </div>
                    <div class="info-container">
                        <div class="info"></div>
                    </div>
                </div>
                <div class="scroll-page3">
                    <div class="bg"></div>
                    <div class="person">
                        <div class="word1"></div>
                        <div class="word2"></div>
                        <div class="word3"></div>
                        <div class="word4"></div>
                    </div>
                    <div class="info-container">
                        <div class="info"></div>
                    </div>
                </div>
                <div class="sphere"></div>
                <div class="bear"></div>
            </div>
            <div class="swiper-slide page2">
                <div class="title">
                    <h3>这时候</h3>
                    <p>如果有一份美味外卖...</p>
                    <p>正好出现...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="bear">
                    <div class="face1"></div>
                    <div class="face2"></div>
                    <div class="hand-left"></div>
                    <div class="hand-right"></div>
                </div>
                <div class="sphere"></div>
                <div class="table"></div>
                <div class="foods"></div>
            </div>
            <div class="swiper-slide page3">
                <div class="title">
                    <h3>这时候</h3>
                    <p>如果有一份美味外卖...</p>
                    <p>正好出现...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="sphere"></div>
                <div class="bear"></div>
                <div class="bear-box">
                    <div class="bear1"></div>
                    <div class="bear2"></div>
                    <div class="bear3"></div>
                </div>
                <div class="normal-box">
                    <div class="license"></div>
                    <div class="oil"></div>
                    <div class="waimai"></div>
                </div>
                <div class="hit-box">
                    <div class="license"></div>
                    <div class="oil"></div>
                    <div class="waimai"></div>
                </div>
            </div>
            <div class="swiper-slide page4">
                <div class="title">
                    <h3>这时候</h3>
                    <p>如果有一份美味外卖...</p>
                    <p>哈哈哈...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="sphere"></div>
                <div class="bear"></div>
                <div class="card1"></div>
                <div class="card2"></div>
                <div class="card3"></div>
            </div>
            <div class="swiper-slide page5">
                <div class="title">
                    <h3>这时候</h3>
                    <p>无论前方...</p>
                    <p>哦呵呵...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="sphere"></div>
                <div class="bear">
                    <div class="smoke"></div>
                </div>
                <div class="cloud">
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                    <div class="snow"></div>
                </div>

            </div>
            <div class="swiper-slide page6">
                <div class="title">
                    <h3>礼物拿到手软</h3>
                    <p>我要Money...</p>
                    <p>万恶的双11...</p>
                    <div class="line"></div>
                </div>
                <div class="bg"></div>
                <div class="sphere"></div>
                <div class="bear">
                    <div class="gift-box">
                        <div class="gift1"></div>
                        <div class="gift2"></div>
                        <div class="gift3"></div>
                        <div class="gift4"></div>
                        <div class="gift5"></div>
                        <div class="gift6"></div>
                        <div class="gift7"></div>
                        <div class="gift8"></div>
                        <div class="gift9"></div>
                        <div class="gift10"></div>
                        <div class="gift11"></div>
                        <div class="gift12"></div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide page7">
                <div class="title">
                    <h3>所有的努力</h3>
                    <p>都是为了将.</p>
                    <p>哦呵呵呵..</p>
                    <div class="line"></div>
                </div>
                <div class="streetLight">
                    <div class="light"></div>
                </div>
                <div class="sphere"></div>
                <div class="motoBike"></div>
                <div class="bear"></div>
                <div class="share"></div>
                <div class="info">waimai.baidu.com</div>
            </div>
        </div>
    </div>
    <!-- 加载页面 -->
    <div class="loading">
        <div class="rider"></div>
        <div class="progress">
            <div class="step"></div>
        </div>
        <div class="info"></div>
        <div class="logo"></div>
        <div class="copyright">
            @ 2018 Baidu Waimai Produced
        </div>
    </div>
    <!-- 欢迎页面 -->
    <div class="welcome">
        <div class="title">
            <div class="hello"></div>
        </div>
        <div class="cloud"></div>
        <div class="bear-box">
            <div class="bear"></div>
            <div class="smoke"></div>
        </div>
        <div class="grass1"></div>
        <div class="grass2"></div>
        <div class="tree"></div>
        <div class="t-btn">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="btn"></div>
        </div>
    </div>

    <audio src="music/hlw.mp3"></audio>
    <div class="audioControl"></div>
</body>
<!-- swiper.js -->
<script src="lib/swiper/swiper.min.js"></script>
<script>
    var newSwiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        on: {
            slideChangeTransitionEnd: function () {
                // alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
                $('.swiper-slide').eq(this.activeIndex).addClass('animate').siblings().removeClass('animate')
                if (this.activeIndex === 2) {
                    $('.swiper-slide').eq(this.activeIndex).addClass('swiper-no-swiping')
                }
                if(this.previousIndex==2){
                    $('.page3 .bear').attr('style','')
                    $('.page3 .bear-box div').attr('style','')
                    $('.page3 .normal-box div').attr('style','')
                    $('.page3 .hit-box div').attr('style','')
                }
            }
        },
    })
</script>

<!-- zepto.js -->
<script src="lib/zepto/zepto.js"></script>
<script src="lib/zepto/event.js"></script>
<script src="lib/zepto/fx.js"></script>
<script src="lib/zepto/fx_methods.js"></script>
<script src="lib/zepto/touch.js"></script>

<script>
    $(function () {
        setTimeout(function () {
            $('.loading').addClass('animate');
        }, 1000)
        $('.loading .step').on('animationend', function () {
            $('.loading').fadeOut(300, function () {
                setTimeout(() => {
                    $('.welcome').addClass('animate')
                }, 500);
            })
        })
    })

    $('.welcome .t-btn').longTap(function () {
        $('.welcome .bear-box').css('animation', 'bearDispear 1s linear forwards')
        setTimeout(() => {
            $('.welcome').fadeOut(1000, function () {
                $('.page1').addClass('animate')
            })
        }, 1000);
    })

    $('.swiper-slide').eq(2).on('click', function () {
        console.log('嘻嘻');
        var index = 0
        setTimeout(function(){
            $('.page3 .bear').css('animation','none')
        },1000)
        var timeId = setInterval(function () {
            $('.page3 .bear-box div').css('opacity','0')
            $('.page3 .bear-box div').eq(index).css('opacity','1')

            $('.page3 .normal-box div').eq(index).css('animation','none')
            $('.page3 .hit-box div').eq(index).css('opacity','1')
            index++;
            if(index==3){
                clearInterval(timeId)
                $('.page3 .hit-box div').css('animation','bearDispear 1s forwards')
                $('.swiper-slide').eq(2).removeClass('swiper-no-swiping')
            }
        }, 1000)
    })

    var audioDom = document.querySelector('audio')

    $('.audioControl').on('click',function(){
        if(audioDom.paused){
            audioDom.play()
            $(this).css('background-image','url("images/play.png")')
        }else {
            audioDom.pause()
            $(this).css('background-image','url("images/pause.png")')
        }
    })
</script>

</html>